import React from 'react';
import ReactDOM from 'react-dom/client';

/* 
  表单处理：
    受控组件：表单的 value 受 state 控制 (相当于 Vue 的 v-model)
      属性：value
      事件：onChange
*/

class App extends React.Component {
  // 表单数据 state
  state = {
    usernmae: '',
    desc: '',
    city: '2',
    isSingle: true,
  };

  // 姓名-输入框
  handlerName = (e) => {
    this.setState({
      usernmae: e.target.value,
    });
  };

  // 描述-文本域
  handlerDesc = (e) => {
    this.setState({
      desc: e.target.value,
    });
  };

  // 城市-下拉框
  handlerCity = (e) => {
    this.setState({
      city: e.target.value,
    });
  };

  // 是否单身-复选框
  // 🔔注意：复选框是控制 checked 属性
  handlerSingle = (e) => {
    this.setState({
      isSingle: e.target.checked,
    });
  };

  render() {
    return (
      <>
        <form>
          姓名：
          <input
            type='text'
            value={this.state.usernmae}
            onChange={this.handlerName}
          />
          <br />
          描述：
          <textarea
            value={this.state.desc}
            onChange={this.handlerDesc}
          ></textarea>
          <br />
          城市：
          <select value={this.state.city} onChange={this.handlerCity}>
            <option value='1'>北京</option>
            <option value='2'>上海</option>
            <option value='3'>广州</option>
            <option value='4'>深圳</option>
          </select>
          <br />
          是否单身：
          <input
            type='checkbox'
            checked={this.state.isSingle}
            onChange={this.handlerSingle}
          />
        </form>
        {/* 打印测试 state 对象，转换成字符串输出 */}
        {JSON.stringify(this.state)}
      </>
    );
  }
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
